import { Swiper } from 'antd-mobile/2x'
import styles from './styles.module.scss'
import Link from 'next/link'
import Live from './Live'
const H5Index = ({ videoInfo, liveListData, match, ready, }) => {
  return (
    <main className={styles.h5Home}>
      <header>
        <Swiper>
          {
            videoInfo?.map((second, index) => (
              <Swiper.Item key={index}>
                <section className={styles.h5VideoLink}>
                  {
                    second?.map((row, i) => (
                      <Link href={`/${index > 1 ? 'marvellous' : 'video'}/${row?.id}`} key={row?.id}>
                        <a style={{ display: i > 5 ? 'none' : "flex" }}>
                          <span>{`【${row.typeName || row.leagueName}】`} </span>
                          <span className='textoverone'>{row?.title || row?.videoName}</span>
                        </a>
                      </Link>
                    ))
                  }
                </section>
              </Swiper.Item>
            ))
          }
        </Swiper>
      </header>
      <Live liveListData={liveListData} match={match} ready={ready} />
    </main >
  )
}


export default H5Index